<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <title>Live code editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="codemirror.min.css" />
    <link rel="stylesheet" href="elegant.css" />

    <script src="codemirror.min.js"></script>
    <script src="javascript.js"></script>
    <script src="lodash.min.js"></script>
    <script src="FileSaver.min.js"></script>

    <style>
      .container {
        display: flex;
        flex-direction: row;
      }

      .column {
        flex: 1;
        border-left: 1px solid #ccc;
      }

      #svgImage {
        background: white;
        margin: 0;
        overflow: auto;
      }

      #downloadFile {
        position: fixed;
        right: 20px;
        top: 15px;
        padding: 5px 10px;
        background: white;
        border: 1px solid #2288ff;
        outline: none;
        font-weight: bold;
        color: #2288ff;
        font-family: sans-serif;
        cursor: pointer;
        z-index: 10;
      }
      #downloadFile:hover {
        background: #d8efff;
      }

      .CodeMirror {
        height: 100%;
        line-height: 1.5;
      }

      @media all and (max-width: 500px) {
        .container {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="column">
        <textarea id="codeEditor">
 /**
 * Binary search
 * @param {Array} list
 * @param {Number} element
 * @returns {number}
 */
function indexSearch(list, element) {
    let currentIndex,
        currentElement,
        minIndex = 0,
        maxIndex = list.length - 1;

    while (minIndex <= maxIndex) {
        currentIndex = Math.floor((maxIndex + maxIndex) / 2);
        currentElement = list[currentIndex];

        if (currentElement === element) {
            return currentIndex;
        }

        if (currentElement < element) {
            minIndex = currentIndex + 1;
        }

        if (currentElement > element) {
            maxIndex = currentIndex - 1;
        }
    }

    return -1;
}</textarea
        >
      </div>
      <button id="downloadFile">DOWNLOAD SVG FILE</button>
      <div class="column">
        <p id="svgImage"></p>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>
